// 柱状图组件
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';


// 1. 把功能代码都放到这个组件中
// 把可变部分抽象成props传入
const BarChart = (title) => {
  
  // 保证dom元素渲染完成后再执行图表渲染
  const chartRef = useRef(null)
  useEffect(() => {
    // 获取渲染图表的 DOM 元素
    // const chartDom = document.getElementById('main');
    const chartDom = chartRef.current;
    // 初始化图表实例
    const myChart = echarts.init(chartDom);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: title.title
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };

    // 使用刚指定的配置项和数据渲染图表。
    option && myChart.setOption(option);
  }, [title]);
  return (
    // {/* 必须要有宽高 */ }
    // {/* <div id='main' style={{width: '500px', height:'400px'}}></div> */ }
  <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>  
  );
}

export default BarChart;
